<template>
  <page-frame>
    <div class="workPlan">
      <div class="toptitle">
        <div class="left">工作计划</div>
        <div class="right">
          <div class="btns">
          <router-link :to="{name: 'workType'}"><el-button class="lightGreenBtn">排班类型</el-button></router-link>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="work-plan-main">
        <div class="input">
          <el-row class="query">
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="queryData.fileId" clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item"   v-show="queryData.fileId=='1'">
                <el-select v-model="queryData.tmId" clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in teams"
                    :label="item.tmName"
                    :value="item.tmId">
                  </el-option>
                </el-select>

                <!--<el-cascader-->
                  <!--expand-trigger="click"-->
                  <!--:options="teamTree"-->
                  <!--v-model="queryData.tmIdArr"-->
                <!--&gt;-->
                <!--</el-cascader>-->
              </div>
              <div class="input-item"   v-show="queryData.fileId=='2'">
                <el-date-picker
                  v-model="queryData.date"
                  type="daterange"
                  align="right"
                  placeholder="选择日期范围"
                  :picker-options="pickerOptions2">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="2" :offset="0">
              <div class="btns" style=" width:70%;">
                <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <!--<el-button type="text" @click="showBed">显示/隐藏床位</el-button>-->
        <div class="tabs emPlan">
          <table class="workPlanTime"  border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
            <tr class="title title-infro">
              <th class="title-name"><div>员工编号</div></th>
              <th class="title-name"><div>员工姓名</div></th>
              <th class="title-name"><div>负责床位</div></th>
              <th colspan="1" v-for="date in dateObj">{{date.date}}</th>
            </tr>
            <tr class="title">
              <td></td>
              <td></td>
              <td></td>
              <th class="th" v-for="date in dateObj">
                <td class="classesInfro"><p>排 班</p></td>
                <td class="bedInfro" v-show="isShow"><p>床 位</p></td>
              </th>
            </tr>
            <tr class="staff-work-Plan" v-for="item in tableData">
              <td><div style="width: 100px;overflow: auto;">{{item.emNo}}</div></td>
              <td><div style="width: 100px;overflow: auto;">{{item.emName}}</div></td>
              <td class="beds">
                <el-tooltip class="item" effect="dark" :content="item.beds" placement="top">
                  <div style="width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; cursor:pointer ">{{item.beds}}</div>
                </el-tooltip>
              </td>
              <th class="th" v-for="schItem in item.schList" @dblclick = "details(schItem,item)">
                <td>
                  <div class="work-typer" :style="{backgroundColor:schItem.backgroundColor}" @click = "classOption">
                    <el-select  :disabled="!schItem.isChange" v-model="schItem.schTypeId" placeholder="请排班" @change="schTypeChange(schItem)">
                      <el-option
                        v-for="item in scheduleTypeList"
                        :label="item.schTypeName"
                        :value="item.schTypeId">
                      </el-option>
                      <el-option
                        label="换班"
                        v-show="schItem.schTypeId"
                        value="100">
                      </el-option>
                    </el-select>
                  </div>
                </td>
                <td v-show="isShow">
                  <!--<div>{{schItem.changeBeds}}</div>-->
                  <el-tooltip class="item" effect="dark" :content="schItem.changeBeds" placement="top">
                    <div style="width: 99px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; cursor:pointer ">{{schItem.changeBeds}}</div>
                  </el-tooltip>
                </td>
              </th>
            </tr>
          </table>
        </div>
        <div class="tabs memberPlan">
          <table class="workPlanTime"  border="0" cellpadding="0" cellspacing="0">
            <tr class="title title-infro">
              <th class="title-name"><div>会员编号</div></th>
              <th class="title-name"><div>会员姓名</div></th>
              <th class="title-name"><div>会员床位</div></th>
              <th colspan="1" v-for="date in dateObj">{{date.date}}</th>
            </tr>
            <tr class="title">
              <td></td>
              <td></td>
              <td></td>
              <th class="th" v-for="date in dateObj">
              <td class="classesInfro"><p>护理安排</p></td>
              <td class="bedInfro"><p>未安排</p></td>
              </th>
            </tr>
            <tr class="staff-work-Plan member-Plan" v-for="item in mTableData">
              <td><div style="width: 100px;overflow: auto;">{{item.memberNo}}</div></td>
              <td>{{item.memberName}}</td>
              <td><div style="width: 80px;overflow: auto;">{{item.bedNo}}</div></td>
              <th class="th" v-for="schItem in item.workPlanInfoForMemberCareListDTOs">
              <td> <div style="width: 80px;height:45px;overflow: auto;">{{schItem.memberScInfo}}</div></td>
              <td>
                <div style="width: 80px;height:45px;overflow: auto;">{{schItem.memberCareInfo}}</div>
              </td>
              </th>
            </tr>
          </table>
        </div>
        <!--请假指派给他人-->
        <el-dialog title="指派设置" :visible.sync="assigned" size="tiny" :close-on-click-modal="false">
          <el-form>
            <el-form-item label="被指派人员">
              <el-col :span="18">
                <el-select v-model="recipientId" @change="getAssignedPeople" placeholder="请选择被指派人员">
                  <el-option
                    v-for="item in shiftTableData"
                    :key="item.emId"
                    :label="item.emName"
                    :value="item.emId">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-form>
          <p style="color: #ff0000;margin: 0 auto; width: 378px;">注意：更换后会把当前员工负责床位会员全部指派给指派成员</p>
          <div slot="footer" class="dialog-footer">
            <el-button @click="delAssign">取 消</el-button>
            <el-button type="primary" @click="confirmAssign">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    </div>
  </page-frame>
</template>

<script >
  import servicePlanApi from '../../service/serManagement/servicePlanApi'
  import scheduleApi from '../../service/serManagement/scheduleApi'
  import teamApi from '../../service/corporation/teamApi';
  import commonJs from '../../config/common'
  export default {
    data () {
      return {
        recipientId:"",
        dateObj:[],
        upData:{
          "date": "2017-07-26T07:40:16.143Z",
          "emId": 19,
          "schTypeId": 0,
          "schTypeName": ""
        },
        teams:[],
        isShow:true,
        assigned:false,
        currentEmItem:{},
        mTableData:[],
//        mTableData:[{
//          "memberId": 0,
//          "memberName": "",
//          "memberNo": "",
//          "workPlanInfoForMemberCareListDTOs": [
//            {
//              "date": "",
//              "memberCareInfo": "",
//              "memberScInfo": ""
//            }
//          ]
//        }],
        tableData:[],
        shiftTableData:[],
        replacedData:[],
        value7:"",
        marks:2,
        pickerOptions2: {
          shortcuts: [{
            text: '未来一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [end, start]);
            }
          }, {
            text: '未来一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [end, start]);
            }
          }]
        },
        teamTree:[],
        selectShow:false,
        empList:[
          {
            "emId":1,
            "emNo":"M17070019",
            "emName":"罗勇",
            "phone":"17187469027",
            "dept":"护理一部"
          },
          {
            "emId":2,
            "emNo":"M17070020",
            "emName":"徐康",
            "phone":"17187469021",
            "dept":"护理一部"
          },
          {
            "emId":3,
            "emNo":"M17070021",
            "emName":"精英",
            "phone":"17187469022",
            "dept":"护理一部"
          }
        ],
        queryData:{
          fileId:1,
          tmId:'',
//          tmIdArr:[],
          dateEnd:new Date(new Date().setTime(new Date().getTime()+3600*1000*24*7)),
          dateStart:new Date(),
          date:[new Date(),new Date(new Date().setTime(new Date().getTime()+3600*1000*24*7))],
          dateEndS: "",
          dateStartS:"",
          dateS:'',
        },
        startEnd:0,
        teamList:[],
        fileList:[{
          fileId: 1,
          fileName: "团队名称",
        },{
          fileId: 2,
          fileName: "工作时间",
        }],
        benChange:{
          "leaveEmId": 0,
          "leaveEmName": "string",
          "relayEmId": 0,
          "relayEmName": "string",
          "relayBeds": "string",
          "relayDate": "2017-07-26T07:07:27.349Z",
          "relaySc": "string",
          "relayScId":1,
        },
        emObj:{
          "date": "2017-07-27T10:46:30.391Z",
          "emId": 0,
          "emName":"精英",
          "team":"护理一队",
          "teamId":6
        },
        scheduleTypeList:[{
          "schTypeId":1,
          "schTypeName":"早班",
          "color":"#F98B8B",
          "timeStart1":"1970-01-01 08:41:34",
          "timeEnd1":"1970-01-01 12:41:34",
          "timeStart2":"",
          "timeEnd2":"",
          "timeStart3":"",
          "timeEnd3":"",
          "timeStart4":"",
          "timeEnd4":""
        },
          {
            "schTypeId":2,
            "schTypeName":"中班",
            "color":"#FEAF6F",
            "timeStart1":"1970-01-01 11:30:52",
            "timeEnd1":"1970-01-01 14:30:52",
            "timeStart2":"1970-01-01 12:37:04",
            "timeEnd2":"1970-01-01 13:30:04",
            "timeStart3":"",
            "timeEnd3":"",
            "timeStart4":"",
            "timeEnd4":""
          },
          {
            "schTypeId":3,
            "schTypeName":"晚班",
            "color":"#404DD6",
            "timeStart1":"1970-01-01 15:39:32",
            "timeEnd1":"1970-01-01 16:39:32",
            "timeStart2":"1970-01-01 16:39:57",
            "timeEnd2":"1970-01-01 16:39:57",
            "timeStart3":"1970-01-01 17:40:08",
            "timeEnd3":"1970-01-01 18:40:08",
            "timeStart4":"",
            "timeEnd4":""
          },
          {
            "schTypeId":4,
            "schTypeName":"休息班",
            "color":"#66E1AE",
            "timeStart1":"",
            "timeEnd1":"",
            "timeStart2":"",
            "timeEnd2":"",
            "timeStart3":"",
            "timeEnd3":"",
            "timeStart4":"",
            "timeEnd4":""
          }]
      }
    },
    methods: {
      init() {
        this.getTeamInfomation();//获取团队信息
        this.getScheduleTypeList();//工作计划类型
        this.query();
        this.getAllTeams();
      },

      /**
       * 获取所有团队
       */
      getAllTeams(){
        let self = this;
        scheduleApi.getAllTeams().then(
          (response)=>{
          if(response.data.status==200){
          self.teams = response.data.data;
        }else{}
      },
      );
      },
      /**
       * 员工计划查询
       */
      query(){
//        this.queryData.tmIdArr.length > 0 ? (this.queryData.tmId = this.queryData.tmIdArr[1]):(this.queryData.tmId = 0);
        this.queryData.dateStart = this.queryData.date[0];
        this.queryData.dateEnd = this.queryData.date[1];
        var date1 = new Date(this.queryData.dateStart);
        var date2 = new Date(this.queryData.dateEnd);
        var s1 = date1.getTime(),s2 = date2.getTime();
        var total = (s2 - s1)/1000;
        var day = parseInt(total / (24*60*60));//计算整数天数
        this.startEnd = day;
        this.dateObj = [];
        for(var i=0;i <= this.startEnd;i++){
          var day =  {date:null};
          var everyDay = moment(this.queryData.dateStart).add(i, 'days');
          day.date = commonJs.formatDateWeek(everyDay);
          this.dateObj.push(day);
        };
        let self = this;
        scheduleApi.getScheduleEmList(self.queryData).then((response) =>{
          self.tableData = response.body.data;
          for(var table of self.tableData){
            for(var item of table.schList){
              item.isChange = true;
              if(new Date(item.date) <= new Date()){
                item.isChange = false;
              }
            }
          };
        });
        this.mQuery();
      },
      showBed(){
        this.isShow ? (this.isShow = false):(this.isShow = true)
      },
      details(schItem,item){
        this.emObj.date = schItem.date;
        this.emObj.emId = schItem.emId;
        this.emObj.emName = schItem.emName;
        this.emObj.team = item.team;
        this.emObj.teamId = item.teamId;
        this.$router.push({name:'workPlanInfo',params:{emObj:this.emObj}});
      },
      /**
       * 会员视图查询
       */
      mQuery(){
        let self = this;
        scheduleApi.getWorkPlanInfoForMemberList(self.queryData).then((response) =>{
          self.mTableData = response.body.data;
        })
      },
      /**
       * 工作计划类型列表查询
       */
      getScheduleTypeList(){
        scheduleApi.getScheduleTypeList().then((response) =>{
          this.scheduleTypeList = response.body.data;
        })
      },
      /**
       * 根据typeId获取团队信息
       */
      getTeamInfoById(typeId){
        let self = this;
        servicePlanApi.getTeamInfo(typeId).then(
          (response)=>{
            self.teamList = response.data.data;
          }
        );
      },
      /**
       * 获取团队信息(服务团队下拉菜单)
       */
      getTeamInfomation(){
        let self = this;
        servicePlanApi.getTeamInformation().then(
          (response)=>{
            self.teamTree = response.data.data.teamTypeList;
          }
        );
      },
      /**
       * 获取顶班人信息
       */
      getAssignedPeople(val){
        console.debug("顶班人信息"+val);
      },
      /**
       * 确认指派
       */
      confirmAssign(){
        this.benChange.leaveEmId = this.currentEmItem.emId;
        this.benChange.leaveEmName = this.currentEmItem.emName;
        this.benChange.relayBeds = this.currentEmItem.beds;
        this.benChange.relayDate = this.currentEmItem.date;
        this.benChange.relaySc = this.currentEmItem.schTypeName;//请假人班次名字
        this.benChange.relayScId = this.currentEmItem.schTypeId;//请假人班次Id

        this.benChange.relayEmId = this.recipientId;//顶班人ID
        this.benChange.relayEmName  = ""; //顶班人姓名
        scheduleApi.bedChanging(this.benChange).then(res=>{
          this.assigned = false;
          this.query();
        },function () {});
      },
      /**
       * 取消指派
       */
      delAssign(){
        this.query();
        this.assigned = false;
      },
      /**
       * 修改班次
       */
      schTypeChange(schItem){
        this.currentEmItem = schItem;
        this.shiftTableData = this.tableData.slice(0);
        if(this.currentEmItem.schTypeId =="100"){
          this.recipientId="";
          this.assigned = true;
          for(let i=0; i<this.shiftTableData.length;i++){
            if(this.shiftTableData[i].emId ==  this.currentEmItem.emId){
              this.shiftTableData.splice(i,1);
            };
          };
        }else{
          this.upData.date = this.currentEmItem.date;
          this.upData.emId = this.currentEmItem.emId;
          this.upData.schTypeId = this.currentEmItem.schTypeId;
          scheduleApi.addOrUpdateScheduleEm(this.upData).then(()=>{
            this.query();
          });
        }
        for(var scheduleList of this.scheduleTypeList){
          if(this.currentEmItem.schTypeId == scheduleList.schTypeId){
            this.currentEmItem.backgroundColor = scheduleList.color;
          };
        };

      },
      classOption(){

      }
    },
    mounted: function () {
      this.init();
    },
  }
</script>
<style>

  .workPlan .work-typer{
    text-align: center;
    line-height: 50px;
    height: 50px;
    width: 100%;
  }
  .workPlan .work-typer .el-input__inner{
    background-color: rgba(255,255,255,0);
    border-color: rgba(255,255,255,0);
    color: #999999;
  }
  .workPlan .tabs .el-select .el-input{
    width: 80px;
  }
  .workPlan .input .btns{
    margin-top: 0px;
  }
  .workPlan .tabs{
    width:100%;
    overflow-x: scroll;
    margin-bottom: 30px;

  }

  .workPlan .tabs table.workPlanTime {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-collapse: collapse;
    border:1px solid #dfe6ec;
    table-layout:fixed;
  }
  /*.workPlan .tabs table.workPlanTime th {*/
    /*border-width: 1px;*/
    /*padding: 8px;*/
    /*border-style: solid;*/
    /*border-color: #666666;*/
    /*background-color: #dedede;*/
    /*width: 70px;*/
  /*}*/
  .workPlan .tabs table.workPlanTime tr.title-infro th{
    background-color: #eef1f6!important;
    border:1px solid #dfe6ec;
    padding:8px 10px;
  }
  .workPlan .tabs table.workPlanTime tr.title td{
    text-decoration: none;
    text-align:center;
    border:1px solid #dfe6ec;
  }
  .workPlan .tabs table.workPlanTime td {
    border-width: 1px;
    border-style: solid;
    border-color: #dfe6ec;
    background-color: #ffffff;
    text-decoration: none;
    text-align:center
  }
  .workPlan .tabs table.workPlanTime .staff-work-Plan th:first-of-type>td:first-child{
    border-left: none!important
  }
  .workPlan .tabs table.workPlanTime .staff-work-Plan.member-Plan th td{
    padding:8px 10px;
    font-weight: normal;
  }
  .workPlan .tabs table.workPlanTime .staff-work-Plan.member-Plan th.th td{
    width: 80px!important;
  }
  .workPlan .tabs table.workPlanTime .title th:first-of-type>td:first-child{
    border-left: none!important
  }
  .workPlan .tabs  table.workPlanTime  th.title-name div{
    width:50px!important;
  }
  .workPlan th.th{
    border:none;
  }
  .workPlan th.th .classesInfro p,.bedInfro p{
    width: 99px!important;
    text-align: center;
    margin: 10px 0;

  }
  .workPlan  .memberPlan th.th .classesInfro .classesInfro,.bedInfro{
    width: 99px!important;
    text-align: center;
    margin: 10px 0;
  }
  .workPlan th.th td{
    width: 100px!important;
    border-right:none!important;
    border-top: none!important;
    word-wrap:break-word!important;
    word-break:break-all!important;
    text-decoration: none;
    text-align:center;
  }
  .workPlan th.th td:last-child{
    border-left:1px solid #dfe6ec;
  }
  .workPlan .tabs .staff-work-Plan>td{
    padding:8px 10px;
    text-decoration: none;
    text-align:center
  }
  .workPlan .tabs .el-select{
    width: 90px!important;
  }
  .workPlan .el-cascader{
    width: 100%!important;
  }
</style>
